import React, {
    Component,
} from 'react'
import { connect } from 'react-redux';
import { View, Text, Image, StyleSheet, FlatList } from 'react-native'
import PropTypes from 'prop-types';
import VideoItem from './VideoItem'
import { Px } from '../utils'

class VideoList extends Component {

    static propTypes = {
        data: PropTypes.any,
        style: PropTypes.any,
        renderItem: PropTypes.func,
        thumbsAction: PropTypes.func,
        playAction: PropTypes.func,
        userDetailAction: PropTypes.func,
    };

    // 生命周期
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    // render part
    render() {
        const { data = [], style, renderItem } = this.props
        console.log('video list', this.props)
        
        return (
            <FlatList
                style={[styles.list, style]}
                data={data}
                renderItem={renderItem || this._renderItem.bind(this)}
                numColumns={2}
                ListFooterComponent={this._renderFooter.bind(this)}
            />
        )
    }

    _renderItem({ item, index }) {
        const { playAction, thumbsAction, userDetailAction } = this.props
        return <VideoItem
            key={index}
            item={item}
            playAction={playAction || this._playAction.bind(this, item)}
            thumbsAction={thumbsAction || this._thumbsAction.bind(this, item)}
            userDetailAction={userDetailAction || this._userDetailAction.bind(this, item)}
        />
    }

    _renderFooter() {
        return (
            <View style={styles.foot}>
                <Text style={styles.noMoreText}>————— 没有更多了 —————</Text>
            </View>
        )
    }

    _playAction(item) {
        this.props.navigation.navigate('VideoDetail', { item: item })
    }

    _thumbsAction(item) {
        const { isLogin = false } = this.props.user || {}
        if (isLogin) {
            // 点赞
            return;
        }
        this.props.navigation.navigate('Login')
    }

    _userDetailAction(item) {
        console.log('_userDetailAction',item, this.props)
        this.props.navigation.navigate('PersonalPage', { item: item })
    }
}

const styles = StyleSheet.create({
    list: {
        flex: 1,
    },
    foot: {
        height: Px(80),
        alignItems: 'center',
        justifyContent: 'center'
    },
    noMoreText: {
        fontSize: Px(26),
        color: '#666'
    }
})

export default connect(state => ({
    user: state.user.user
})
)(VideoList)